<template>
  <view style="padding-bottom: 150rpx;">
    <view style="width: 100%;height: 890rpx;position: relative;">
      <!-- 这块是限时折扣的内容 -->
      <!--   <view class="swiperSon" v-if="obj.activity_discounts[0].type == 'full_discount'" style="padding: 15rpx 15rpx 15rpx 32rpx;">
        <image src="/static/lzl/img_xszk_bg@2x.png" class="img" mode=""></image>
        <view class="" style="color: #000;display: flex;justify-content: space-between;align-items: center;">
          <view class="">
            <view class="" style="display: flex;align-items: baseline;">
              <view class="" style="color: #FFFFFF;font-size: 26rpx;font-weight: 500;">活动价 ¥</view>
              <view class="" style="color: #FFFFFF;font-size: 48rpx;font-weight: bold;">{{ obj.price }}</view>
            </view>
            <view class="" style="color: #FFFFFF;font-size: 24rpx;font-weight: 500;">原价¥{{ obj.original_price }} | 活动已抢购{{ obj.sales }}件</view>
          </view>
          <view class="">
            <view class="" style="display: flex;align-items: center;">
              <image src="/static/lzl/icon_clock@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
              <view class="" style="font-size: 28rpx;font-weight: 500;color: #fff;">限时折扣</view>
            </view>
            <view class="" style="font-size: 28rpx;font-weight: 500;color: #fff;text-align: center;">
              <u-count-down
                :show-border="false"
                color="#fff"
                separator-color="#fff"
                :show-days="true"
                font-size="22"
                @change="changeFn"
                separator-size="22"
                :border-color="false"
                :bg-color="none"
                :show-seconds="false"
                :show-hours="true"
                :show-minutes="true"
                separator="zh"
                :timestamp="timestamp"
              ></u-count-down>
            </view>
          </view>
        </view>
      </view> -->
      <uni-swiper-dot :dots-styles="dotsStyles" :info="Banners" :current="current" field="content" mode="round">
        <swiper :autoplay="autoplay" height="890" interval="3000" duration="1500" show-center-play-btn="true" class="swiper-box" circular="true" @change="swiperChange">
          <swiper-item v-for="(item, index) in Banners" :key="index">
            <view class="swiper-item" v-show="!splits(item.image)" wx-if="{item}">
              <image v-if="item.image" style="width: 100%;height: 100%;" :src="item.image" mode=""></image>
            </view>
            <view class="swiper-item" v-show="splits(item.image)" v-if="item.image">
              <video
                :id="'myVideo' + index"
                :autoplay="false"
                :src="item.image"
                controls
                :enable-progress-gesture="false"
                object-fit="cover"
                style="width: 100%;height: 890rpx;"
                @play="play"
                @pause="pause"
                @ended="ended"
                auto-pause-if-navigate
                auto-pause-if-open-native
              ></video>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <view class="zhuti" style="padding: 15rpx 32rpx;">
      <view v-if="obj.activity_discounts[0].type == 'full_discount'" style="display: flex;justify-content: space-between;align-items: center;" class="">
        <view class="">
          <view class="tit">{{ obj.title }}</view>
          <view class="price" style="display: flex;align-items: center;margin-top: 10rpx;">
            <view class="" style="margin-right: 15rpx;display: flex;align-items: baseline;">
              <view class="" style="color: #C3B27F;font-size: 28rpx;font-weight: 400;">限时折扣价 ￥</view>
              <view class="" style="font-size: 48rpx;font-weight: bold;">{{ obj.price || price }}</view>
              <view class="" style="text-decoration: line-through;color: #ADADAA;font-size: 24rpx;margin-left: 15rpx;font-weight: 400;">￥{{ obj.original_price }}</view>
            </view>
          </view>
        </view>
        <view class="" style="margin-left: 20rpx;">
          <view class="" style="display: flex;align-items: center;">
            <image src="/static/lzl/icon_clock@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
            <view class="" style="font-size: 28rpx;font-weight: 500;color: #C3B27F;">限时折扣</view>
          </view>
          <view class="" style="font-size: 28rpx;font-weight: 500;color: #fff;text-align: center;">
            <u-count-down
              :show-border="false"
              color="#C3B27F"
              separator-color="#C3B27F"
              :show-days="true"
              font-size="26"
              @change="changeFn"
              separator-size="26"
              :border-color="false"
              :bg-color="none"
              :show-seconds="false"
              :show-hours="true"
              :show-minutes="true"
              separator="zh"
              :timestamp="timestamp"
            ></u-count-down>
          </view>
        </view>
      </view>
      <view v-else class="">
        <view class="tit">{{ obj.title }}</view>
        <view class="price" style="display: flex;align-items: center;margin-top: 20rpx;">
          <view class="" style="margin-right: 15rpx;">￥{{ specObj.price || price }}</view>
          <!-- 这个是拼团活动提醒 obj.activity_discounts[0].type == 'full_reduce'-->
          <view
            class=""
            v-if="obj.activity.type == 'groupon'"
            style="color: #8A7229;font-size: 24rpx;font-weight: 400; width: 112rpx;height: 42rpx;background-color: #FCF6E3;text-align: center;line-height: 42rpx;"
          >
            2人团
          </view>
          <!-- 这个是满多少包邮 -->
          <view
            v-if="false"
            class=""
            style="color: #8A7229;font-size: 24rpx;font-weight: 400;padding: 5rpx 10rpx; height: 42rpx;background-color: #FCF6E3;text-align: center;line-height: 42rpx;"
          >
            满300包邮
          </view>
        </view>
      </view>
      <!-- 这个是拼团活动提醒 -->
      <view class="" v-if="obj.activity.type == 'groupon'" style="display: flex;justify-content: space-between;margin-bottom: 20rpx;align-items: center;">
        <view class="" style="color: #ADADAA;font-size: 28rpx;font-weight: 500;">原价：￥{{ obj.original_price }}</view>
        <view class="" style="color: #ADADAA;font-size: 24rpx;font-weight: 500;">{{ obj.activity_time }}</view>
      </view>
      <!-- 下方的颜色 -->
      <view class="color">
        <view class="col" v-for="(item, index) in sku[0].content" :style="{ backgroundColor: item.color }" @click="clickColor(item, index)" :class="{ active: index == indexOf }">
          <!-- {{ item.text | colorchu }} -->
        </view>
      </view>
      <!-- 选择尺码 -->
      <view style="height: 88rpx; position: relative;">
        <image src="/static/lzl/bottom.png" style="width: 48rpx;height: 48rpx;position: absolute;right: 20rpx;top: 20rpx;" mode=""></image>
        <uni-data-select placeholder="尺码选择" v-model="valueSize" :text="name" :localdata="sku[1].content" @change="changeSize"></uni-data-select>
      </view>
    </view>
    <!-- 下方的产品介绍 -->
    <view class="u-content" style="padding: 20rpx 32rpx;"><u-parse :html="obj.content"></u-parse></view>
    <!-- 下方的商品指南 -->
    <view class="" style="display: flex;justify-content: space-around;padding: 0 10rpx;margin-top: 48rpx;">
      <view @click="swbTab(1)" class="btnchi">
        <image src="/static/lzl/icon_size guide@2x.png" style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" mode=""></image>
        <view class="">尺码指南</view>
      </view>
      <view @click="swbTab(2)" class="btnchi">
        <image src="/static/lzl/icon_Product care@2x.png" style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" mode=""></image>
        <view class="">产品养护</view>
      </view>
      <view @click="swbTab(3)" class="btnchi">
        <image src="/static/lzl/icon_giveaway packaging@2x.png" style="width: 48rpx;height: 48rpx;margin-right: 10rpx;" mode=""></image>
        <view class="">赠送包装</view>
      </view>
    </view>
    <!-- 下方的滚动推荐 -->
    <view class="gengduo" scroll-x="true">
      <view class="top_tit">
        <view class="tit_name">店长推荐</view>
        <view class="bg1"></view>
        <view class="bg2"></view>
      </view>
      <scroll-view class="scrollContainer" scroll-x>
        <view class="scrollitem" v-for="(item, index) in obj.recommend" @click="toDetlis(item)" :key="index">
          <image class="scrollimage" :src="item.image"></image>
          <!-- <view class="recommandItemText">85415646516552</view> -->
          <view class="tit">{{ item.title }}</view>
          <view class="prices">￥{{ item.price }}</view>
        </view>
      </scroll-view>
    </view>
    <!-- 底部的立即购买 -->
    <view class="tab" style="width: 100%;height: 128rpx;background-color: #fff;position: fixed;bottom: 0;left: 0;">
      <view class="left" @click="clHome">
        <image style="width: 48rpx;height: 48rpx;" src="/static/lzl/tabBar_home@2x.png" mode=""></image>
        <!-- <view class="">首页</view> -->
      </view>
      <view class="shopp">
        <button :plain="true" open-type="contact" @contact="contact" style="border: none;height: 48rpx;width: 48rpx;position: relative;">
          <image src="/static/lzl/kefu@2x.png" style="width: 48rpx;height: 48rpx;position: absolute;left: 0;top: 0;" mode="widthFix"></image>
        </button>
      </view>
      <view class="shopp" @click="cliShoop">
        <image style="width: 48rpx;height: 48rpx;" src="/static/lzl/tabBar_Shopping Cart@2x.png" mode=""></image>
        <!-- <view class="">购物车</view> -->
        <view class="tishi" v-show="shooplist.length != 0">{{ shooplist.length }}</view>
      </view>
      <view class="jia" @click="cartShopp">加入购物车</view>
      <view class="pay" v-if="obj.activity.type != 'groupon'" @click="liPay">立即购买</view>
      <view class="pay" v-if="obj.activity.type == 'groupon'" @click="liPay">立即拼团</view>
    </view>
  </view>
</template>

<script>
import { tool } from '@/tool.js';
export default {
  data() {
    return {
      timestamp: '8888',
      obj: {},
      content: `
      					<p>露从今夜白，月是故乡明</p>
      					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
      				`,
      price: '1180.00',
      // arr: [{ text: name }],
      valueSize: '',
      colorValue: '',
      specObj: {}, //选好之后的规格
      range: [{ value: 0, text: '篮球' }, { value: 1, text: '足球' }, { value: 2, text: '游泳' }],
      indexOf: 0,
      Banners: [], //轮播图
      shooplist: [], //购物车列表
      autoplay: false, //自动切换轮播图
      current: 0,
      videoContext: '',
      dotsStyles: {
        backgroundColor: 'rgba(255,255,255,0.4)',
        border: 'rgba(255,255,255,0.4)',
        selectedBackgroundColor: '#fff',
        selectedBorder: '#fff'
      },
      sku: [],
      sku_price: []
    };
  },
  computed: {
    num() {}
  },
  onShow() {
    // this.init();
    // 获取购物车里的内容
    this.initCart();
  },
  onLoad(options) {
    this.id = options.id;
    this.init(options.id);
  },
  filters: {
    colorchu(data) {
      let color = data.split('#');
      let col = '#' + color[1];
      return col;
    }
  },
  methods: {
    // 点击跳转到tabBar页面
    swbTab(data) {
      if (data == 1) {
        uni.navigateTo({
          url: '/pages/my/textValue/size/size'
        });
      } else if (data == 2) {
        uni.navigateTo({
          url: '/pages/my/textValue/conserve/conserve'
        });
      } else if (data == 3) {
        uni.navigateTo({
          url: '/pages/my/textValue/delivery/delivery'
        });
      }
    },
    // 点击跳转详情
    toDetlis(item) {
      // console.log(item);
      uni.redirectTo({
        url: '/pages/details/details?id=' + item.id
      });
    },
    // 跳转首页
    clHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    //跳转到购物车
    cliShoop() {
      uni.switchTab({
        url: '/pages/shooping/shooping'
      });
    },
    changeFn() {
      var tmp = Date.parse(new Date()).toString();
      tmp = tmp.substr(0, 10);
      this.timestamp = `${this.obj.activity_discounts[0].endtime}` - tmp;
    },
    // 初始值
    async init(id) {
      let n = await this.$api.details({ id: id });
      this.obj = n.data;

      let newJsonParam = JSON.parse(JSON.stringify(n.data.sku).replace(/name/g, 'text'));
      // console.log(newJsonParam, '8888888');
      // 新增尺码选择
      newJsonParam[1].content.forEach(item => {
        for (let i in item) {
          if (i == 'id') {
            item.value = item.id; //修改属性名为newVal
          }
        }
      });
      // n.data.sku.forEach(item=>{
      //   item.content.forEach(ite=>{
      //     ite
      //   })
      // })
      //价格
      this.price = n.data.price;
      this.sku_price = n.data.sku_price;
      // sku规格
      this.sku = newJsonParam;
      // 这个是颜色
      this.sku[0].content.forEach(item => {
        let color = item.text.split('#');
        let col = '#' + color[1];
        item.color = col;
        item.colorName = color[0];
      });
      this.colorValue = this.sku[0].content[0].id;
      // 第一个轮播图
      this.Banners = JSON.parse(this.sku[0].content[0].images);
      if (n.data.activity_discounts[0].type == 'full_discount') {
        let tmp = Date.parse(new Date()).toString();
        tmp = tmp.substr(0, 10);
        this.timestamp = `${n.data.activity_discounts[0].endtime}` - tmp;
      }
    },
    // 点击立即购买
    liPay() {
      if (this.specObj.stock == 0) {
        return this.$msg('已经没有库存了哦！');
      }
      if (!this.valueSize) return this.$msg('请选择规格');
      let arr = [{ goods_id: this.specObj.goods_id, goods_num: 1, goods_price: this.specObj.price, sku_price_id: this.specObj.id }];
      let obj = {
        coupons_id: 0,
        from: 'goods',
        order_type: 'goods',
        goods_list: arr
      };
      let objSku = JSON.stringify(obj);
      uni.navigateTo({
        url: '/pages/order/order?data=1&obj=' + objSku
      });
    },
    //点击加入购物车
    async cartShopp() {
      if (this.specObj.stock == 0) {
        return this.$msg('已经没有库存了哦！');
      }
      if (!this.valueSize) return this.$msg('请选择规格');
      let arr = [{ goods_id: this.specObj.goods_id, goods_num: 1, goods_price: this.specObj.price, sku_price_id: this.specObj.id }];
      let n = await this.$api.add({ from: 'goods', goods_list: arr });
      this.initCart();
      if (n.code == 1) {
        this.$msg('加入购物车成功');
      } else {
        this.$msg('加入购物车失败');
      }
    },
    // 点击切换颜色后
    clickColor(item, index) {
      this.Banners = JSON.parse(item.images);
      this.indexOf = index;
      this.colorValue = item.id;
      let n = `${this.colorValue},${this.valueSize}`;
      this.specObj = tool(this.sku_price, n);
    },
    // 切换尺码以后
    changeSize(e) {
      let n = `${this.colorValue},${this.valueSize}`;
      this.specObj = tool(this.sku_price, n);
    },

    // 获取数据
    swiperChange(e) {
      let { current, source } = e.detail;
      this.videoContext = uni.createVideoContext('myVideo' + (current - 1));
      //只有手动切换时开始轮播，并且上一页视频暂停
      this.current = current;
      if (source === 'touch') {
        this.videoContext.pause(); //暂停
        this.autoplay = false;
      }
    },

    // 处理banner返回的是是视频还是图片
    splits(url) {
      if (url.indexOf('.') != -1) {
        var ext = url.substring(url.lastIndexOf('.') + 1);
        return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1;
      }
    },
    // 点击开始/继续播放
    play() {
      this.autoplay = false;
      this.videoContext.requestFullScreen();
    },
    // 视频暂停
    pause() {
      this.autoplay = true;
    },
    // 视频结束
    ended() {
      this.autoplay = true;
    },
    // 获取购物车列表
    async initCart() {
      let n = await this.$api.cart();
      this.shooplist = n.data;
    }
  }
};
</script>

<style lang="scss">
.img {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 132rpx;
}
.btnchi {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #c3b27f;
  width: 208rpx;
  height: 72rpx;
  line-height: 72rpx;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  opacity: 1;
  border: 2rpx solid #c3b27f;
}
.swiperSon {
  position: absolute;
  z-index: 999999;
  bottom: 0;
  left: 0;
  color: #fff;
  width: 100%;
  height: 132rpx;
}
.tab {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 30rpx 0 10rpx;
  .left {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 72rpx;
    font-size: 22rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    height: 84rpx;
  }
  .shopp {
    position: relative;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 72rpx;
    font-size: 22rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    width: 72rpx;
    height: 84rpx;
    .tishi {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      border-radius: 10rpx;
      font-size: 20rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      text-align: center;
      line-height: 20rpx;
      color: #ffffff;
      width: 20rpx;
      height: 20rpx;
      background-color: #ff0000;
    }
  }
  .jia {
    width: 230rpx;
    height: 84rpx;
    border: 2rpx solid #c3b27f;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #c3b27f;
    text-align: center;
    line-height: 84rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }
  .pay {
    width: 230rpx;
    height: 84rpx;
    background: linear-gradient(310deg, #c3b27f 0%, #eed893 100%);
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 84rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }
}
// .uni-stat__actived {
/deep/ .uni-select {
  height: 88rpx !important;
  border: 2rpx solid #adadaa !important;
  border-radius: 0 !important;
}
// }

* {
  box-sizing: border-box;
}
.zhuti {
  .color {
    display: flex;
    margin-bottom: 32rpx;
    .col {
      margin-right: 24rpx;
      width: 48rpx;
      height: 48rpx;
      // background-color: pink;
      border-radius: 24rpx;
      border: 2rpx solid #f6f6f6;
      &.active {
        border: 2rpx solid #322922;
      }
    }
  }
  .tit {
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    // font-weight: bold;
    color: #0a0a09;
    margin-top: 15rpx;
    line-height: 60rpx;
  }
  .price {
    margin-top: 8rpx;
    margin-bottom: 20rpx;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #c3b27f;
  }
}
.swiper-box {
  height: 890rpx;
  width: 100%;
  .swiper-item {
    height: 890rpx;
    width: 100%;
  }
}
.gengduo {
  padding-top: 32rpx;
  padding-bottom: 42rpx;
  background-color: #f7f7f7;
  // height: 450rpx;
  margin-top: 50rpx;
  // background-color: pink;
  width: 100%;
  .top_tit {
    margin-bottom: 44rpx;
    position: relative;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #322922;
    .bg1 {
      position: absolute;
      left: 46%;
      top: 50rpx;
      // z-index: 999;
      width: 14rpx;
      height: 0rpx;
      opacity: 1;
      border: 3rpx solid #131313;
      border-radius: 1rpx;
    }
    .bg2 {
      position: absolute;
      left: 49%;
      top: 50rpx;
      width: 38rpx;
      height: 0rpx;
      opacity: 1;
      border: 3rpx solid #131313;
      border-radius: 1rpx;
    }
  }
  .son {
    margin-right: 20rpx;
    width: 345rpx;
    height: 450rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    .img {
      width: 345rpx;
      height: 314rpx;
    }
    .tit {
      margin-top: 10rpx;
      color: #001b0a;
      font-size: 32rpx;
      display: -webkit-box; //对象作为弹性伸缩盒子模型显示
      overflow: hidden; //溢出隐藏
      -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
      -webkit-line-clamp: 1; //设置 块元素包含的文本行数
    }

    .price {
      font-size: 32rpx;
      color: #001b0a;
      font-weight: 700;
      margin-top: 20rpx;
    }
  }
}
// 容器项
.scrollitem {
  display: inline-block;
  margin-right: 30rpx;
  height: 234rpx;
  .tit {
    width: 290rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    margin-top: 22rpx;
    margin-bottom: 8rpx;
    color: #000000;
    text-align: center;
    white-space: nowrap;
    /*2. 超出的部分隐藏*/
    overflow: hidden;
    /*3. 文字用省略号替代超出的部分*/
    text-overflow: ellipsis;
  }
  .prices {
    text-align: center;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #393939;
  }
}
.scrollimage {
  width: 280rpx;
  height: 320rpx;
}
// 容器
.scrollContainer {
  padding-left: 32rpx;
  width: 100%;
  height: 446rpx;
  white-space: nowrap;
  // background-color: #fff;
}
</style>
